<template>
	<div>
		<div class="carEditorSubmit">
			<button type="submit" form="formReserce" class="submits">确定</button>
		</div>
		<div class="page has-navbar has-tabbar" v-nav="{title: '添加客户', showBackButton: true}">
			<div class="page-content padding-top" style="margin-bottom: 0">
				<div class="car-editor" ref="carEditor">
					<div class="reserve">
						<form id="formReserce" @submit.prevent="submit">
							<!-- <input name="customerShopId" v-model="params.customerShopId" class="none" type="text" /> -->
							<input name="shopId" v-model="userSession.shopId" class="none" type="text" />
							<ul>
								<li>
									<list>
										<item>
											<div class="car-enitor-tr active">
												<div class="car-editor-name">客户名称</div>
												<div class="car-editor-input">
													<input type="text" placeholder="请输入客户名称" v-model="res.customer.customerName" required="required" name="customerName">
												</div>

											</div>
										</item>
										<item>
											<div class="car-enitor-tr active">
												<div class="car-editor-name">性别</div>
												<div class="car-editor-input">
													<div class="car-editor-radio">
														<input type="radio"  v-model="res.customer.customerGender" value="1" id="nan">
														<label for="nan">男</label>
														<input type="radio" v-model="res.customer.customerGender" value="2" id="nv" />														
														<label for="nv">女</label>
														<input type="hidden" name="customerGender"  v-model="res.customer.customerGender" />
													</div>
												</div>
											</div>
										</item>
										<item>
											<div class="car-enitor-tr active">
												<div class="car-editor-name">客户电话</div>
												<div class="car-editor-input">
													<input type="number" placeholder="请输入客户电话" pattern="^([0-9]){17}$" required="required" v-model="res.customer.customerPhone" name="customerPhone">
												</div>
											</div>
										</item>
										<item>
											<div class="car-enitor-tr active" @click="channelIdFn">
												<div class="car-editor-name">客户来源</div>
												<div class="car-editor-input">
													<input type="text" placeholder="客户来源" v-model="res.channelName" name="channelName" readonly>
													<input type="text" v-model="res.channelId" class="none" name="channelId" />
												</div>
												<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
											</div> 
										</item>
										<item>
											<div class="car-enitor-tr active"  @click="customerLevelFn">
												<div class="car-editor-name">客户等级</div>
												<div class="car-editor-input">
													<input type="text" placeholder="客户等级" v-model="res.levelTxt" name="levelTxt" readonly >
													<input type="text" v-model="res.levelId" class="none" name="levelId" />
												</div>
												<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
											</div> 
										</item>
										<item>
											<div class="car-enitor-tr active" @click="provinceIdFn" >
												<div class="car-editor-name">归属地区</div>
												<div class="car-editor-input">
													<input type="text" placeholder="请选择(省)(市)" v-model="provinceAll" readonly  name="">
													<input type="text" v-model="res.provinceId" name="provinceId" class="none" />
													<input type="text" v-model="provinceName" name="provinceName" class="none" />
													<input type="text" v-model="res.customer.cityId" name="cityId" class="none" />
													<input type="text" v-model="cityName" name="cityName" class="none" />
												</div>
												<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
											</div> 
										</item>
										<item>
											<div class="car-enitor-tr active" @click="sectionFn">
												<div class="car-editor-name">预算区间</div>
												<div class="car-editor-input">
													<input type="text" placeholder="请选择预算区间" v-model="sectionAll" readonly  >
													<input type="text" class="none" v-model="sectionObj.min" name="customerBudgetMin" />
													<input type="text" class="none" v-model="sectionObj.max" name="customerBudgetMax" />

												</div>
												<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
											</div> 
										</item>
										<item>
											<div class="car-enitor-tr " >
												<div class="car-editor-name">备注</div>
												<div class="car-editor-textarea">
													<textarea v-model="res.customerRemark" :class="{on:textareaNotice}" name="customerRemark"  placeholder="请输入备注信息"></textarea>
													<span class="span">{{remarkLength}}/50</span>
												</div>
											</div> 
										</item>
									</list>
								</li>
							</ul>
							<input type="text" class="none" name="marketId" v-model="userSession.marketId" >
						</form>
					</div>
				</div>
			</div>
		</div>
		<transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
			<keep-alive>
				<sectionSelect @sectionChangeFn="sectionChangeFn" v-if="sectionShow" />
			</keep-alive>
		</transition>
		<transition-group enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" >
			<modal :paramsIs="paramsIs" v-for="(item,index) in paramsIs" :key="(index)" :itemIndex="index" />
		</transition-group>
		
	</div>
</template>
<script>
	import sectionSelect from 'src/assembly/sectionSelect.vue'
	import modal from 'src/assembly/modalList.vue'
	import {bus} from 'bus.js'
	export default {
		data() {
			return {
				res:{
					customer:{
						customerGender:1
					}
				},
				remarkLength:0,				
				sectionShow:false,
				sectionObj:{
					min:'',
					max:''
				},
				paramsIs:[],
				textareaNotice:false,
				provinceName:'',
				cityName:'',
				params:{},
			}
		},
		computed:{
			sectionAll(){
				return this.sectionObj.max?`${this.sectionObj.min}~${this.sectionObj.max}万`:''
			},
			provinceAll(){
				return this.cityName?`${this.provinceName} ${this.cityName}`:''
			},
			userSession() {
				return sess.get('userSession')
			},	
		},
		methods: {
			busOn(){
				bus.$off('provinceId')
				bus.$off('cityIdFn')
				bus.$off('cusetomerLevel')
				bus.$off('channelId')
				bus.$on('provinceId', (index) => {
					this.provinceName = this.paramsIs[0].list[index].name
					this.res.provinceId = this.paramsIs[0].list[index].id
					
					window.axios.get(baseUrl + '/controller/area/city', {
						params: {
							provinceId: this.res.provinceId
						}
					}).then((res) => {
						this.paramsIs.push({
							list: [],
							title: '归属地(市)',
							emit: 'cityIdFn',
						})
						for(let item of res.data.result) {
							this.paramsIs[1].list.push({
								name: item.cityName,
								id: item.cityId
							})
						}
					})
				})
				bus.$on('cityIdFn', (index) => {
					this.cityName = this.paramsIs[1].list[index].name
					this.res.customer.cityId = this.paramsIs[1].list[index].id
					// console.log(this.res)
					setTimeout(()=>{
						this.paramsIs = []
					},100)
					
				})
				bus.$on('cusetomerLevel',(index)=>{
					this.res.levelTxt = this.paramsIs[0].list[index].name
					this.res.levelId = this.paramsIs[0].list[index].id
					this.paramsIs = []
				})
				bus.$on('channelId', (index) => {
					this.res.channelName = this.paramsIs[0].list[index].name
					this.res.channelId = this.paramsIs[0].list[index].id
					this.paramsIs = []
				})
			},
			submit() {},
			sectionChangeFn(obj){
				this.sectionShow = false
				if(obj){
					this.sectionObj = obj
				}
			},
			sectionFn(){
				this.sectionShow = true
			},
			//归属地
			provinceIdFn() {
				window.axios.get(baseUrl + '/controller/area/province').then((res) => {
					this.paramsIs.push({
						list: [],
						title: '归属地(省)',
						emit: 'provinceId',
					})
					for(let item of res.data.result) {
						this.paramsIs[0].list.push({
							name: item.provinceName,
							id: item.provinceId
						})
					}
				})
			},
			//客户等级
			customerLevelFn(){
				window.axios.get(baseUrl + '/crm-web/controller/sysParam/customerLevel-list',{params:{marketId:sess.get('userSession').marketId,shopId:sess.get('userSession').shopId,levelState:1}}).then((res) => {
					this.paramsIs.push({
						list:[],
						title:'客户等级',
						emit:'cusetomerLevel'
					})
					// console.log(res)
					for(let item of res.data.result) {
						this.paramsIs[0].list.push({
							name: item.levelTxt,
							id: item.levelId
						})
					}
				})

			},
			//客户来源
			channelIdFn() {
				window.axios.get(baseUrl + '/crm-web/controller/sysParam/channel-list',{params:{marketId:sess.get('userSession').marketId,channelState:1}}).then((res) => {
					this.paramsIs.push({
						list: [],
						title: '客户来源',
						emit: 'channelId',
					})
					for(let item of res.data.result) {
						this.paramsIs[0].list.push({
							name: item.channelName,
							id: item.channelId
						})
					}
				})
			},
			// 客户详情
			customerGet(){
				window.axios.get(baseUrl+'/crm-web/controller/customer/list',{params:{customerShopId:this.params.customerShopId,shopId:sess.get('userSession').shopId}}).then((res)=>{
					console.log(res)
					if(res){
						this.res = res.data.result[0]
						this.cityName = this.res.customer.cityName?this.res.customer.cityName:''
						this.provinceName = this.res.customer.provinceName?this.res.customer.provinceName:''
						this.sectionObj.max = this.res.customerBudgetMax?this.res.customerBudgetMax:''
						this.sectionObj.min = this.res.customerBudgetMin?this.res.customerBudgetMin:''
					}
				})
			},
			submit(event){
				if(this.res.customer.customerPhone.length!=11){
					$toast.show('请输入正确手机号')
					return
				}
				if(!this.res.channelId){
					$toast.show('请选择客户来源')
					return
				}
				if(!this.res.channelId){
					$toast.show('请选择客户来源')
					return
				}
				if(!this.res.levelId){
					$toast.show('请选择客户等级')
					return
				}
				if(!this.res.customer.cityId){
					$toast.show('请选择归属地')
					return
				}
				if(!this.sectionAll){
					$toast.show('请选择预算区间')
					return
				}
				
				let formData = new FormData(event.target)
				let params = {}
				let obj = event.srcElement ? event.srcElement : event.target;
				for(let i of obj){
					if(i.name){
						Object.assign(params, {
							[i.name]: i.value
						})
					}
				}
				// console.log(params)
				window.axios.get(baseUrl+'/crm-web/controller/customer/insertCustomer',{params:params}).then((res)=>{
					if(res){
						setTimeout(()=>{
							$toast.show('新增成功', 1000)
							setTimeout(()=>{
								this.$router.go(-1)
							},1000)
						},500)						
					}
				})
			}
		},
		created(){
			// this.sectionChange = this
			this.busOn()
			console.log(this.userSession)
		},
		activated(){
			this.busOn()
		},
		components:{
			sectionSelect,
			modal
		},
		watch:{
			'res.customerRemark':function(){
				if(this.res.customerRemark){
					this.remarkLength = this.res.customerRemark.length
					if(this.remarkLength>50)
						this.textareaNotice = true
					else
						this.textareaNotice = false
				}
			}
		}
	}
</script>